<template>
  <a-select
    class="select-atlas-input"
    mode="multiple"
    showArrow
    :style="`width: ${width}px`"
    :value="value"
    @change="selectChange"
    :loading="fetchAtlasListLoading"
    :filter-option="filterOption"
    not-found-content="没有搜索到相关图集"
    :default-active-first-option="false"
    @deselect="handleAtlasDeselect"
    @search="handleAddAtlasSearch"
    show-search
    placeholder="请选择一个图集"
  >
    <a-select-option
      v-for="atlas in atlasList"
      :value="atlas.id"
      :key="atlas.id"
      >{{ atlas.name }}</a-select-option
    >
  </a-select>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'

import { AtlasApi, fetchAtlasList } from '@/api/premium/content/atlas'
import { removeMaterialAtlas } from '@/api/premium/content/material'
import { MaterialSecType } from '@/components/ItemList/MaterialList/types'

import type {
  AtlasItem,
  QueryAtlasRequest,
} from '@/api/premium/content/model/atlasModel'
import type { RemoveMaterialAtlasRequest } from '@/api/premium/content/model/materialModel'
import type { MaterialItem } from '@/components/ItemList/MaterialList/types'
import type { PageReqParams } from '@/api/types'
import { useStore } from '@/store'

const props = withDefaults(
  defineProps<{
    value: string[]
    width?: number
    material: MaterialItem
  }>(),
  {
    width: 350,
  }
)

const emits = defineEmits<{
  (e: 'update:value', value: string[]): void
  (e: 'remove'): void
}>()

const selectChange = (value: string[]) => {
  emits('update:value', value)
}

const store = useStore()
const atlasList = ref<AtlasItem[]>([])

onMounted(async () => {
  await handleAddAtlasSearch('')
})

/**
 * 删除当前素材的某一个图集
 *
 * @param item 当前素材项
 * @param atlasId 取消选中的图集id
 */
const handleAtlasDeselect = async (atlasId: string) => {
  if (props.value.includes(atlasId)) {
    const reqData: RemoveMaterialAtlasRequest = {
      materialId: props.material.id,
      data: [atlasId],
    }
    await removeMaterialAtlas(reqData)
    message.success('图集移除成功')
    emits('remove')
  }
}

/**
 * 获取支持当前素材类型的图集列表
 * 只与一级素材类型相关
 *
 * @param materialItem
 * @param val
 */
const handleAddAtlasSearch = async (val: string) => {
  const reqParam: QueryAtlasRequest & PageReqParams = {
    type: props.material.type,
    name: val,
    size: -1,
    current: 1,
  }
  const { data } = await fetchAtlasList(reqParam)
  // 筛选符合条件的图集
  atlasList.value = data.records.filter((atlas) => {
    if (atlas.itype && atlas.itype !== MaterialSecType.NONE) {
      return props.material.itype === atlas.itype
    } else {
      return true
    }
  })
}
const fetchAtlasListLoading = computed(() =>
  store.getters['global/isOpLoading'](AtlasApi.GET_ATLAS_LIST)
)

/**
 * 搜索图集列表显示和输入相关的图集
 */
const filterOption = (
  input: string,
  option: { children: [{ children: string }]; disabled: boolean }
) => {
  return option.children[0].children.includes(input)
}
</script>

<style lang="scss" scoped>
@include b(select-atlas-input) {
}
</style>
